<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="/client/writeBlog/wangdeitor.css" rel="stylesheet">
  <link rel="stylesheet" href="/client/reset.css">
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    .header {
      height: 90px;
    }

    .title {
      text-align: center;
      line-height: 40px;
    }

    .tie {
      width: 100%;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
    }

    .submit {
      width: 100%;
      height: 60px;
      text-align: center;
      font-size: 30px;
      line-height: 60px;
    }

    .submit:hover {
      background-color: orangered;
      color: white;
    }

    #editor—wrapper {
      border: 1px solid #ccc;
      z-index: 100;
      /* 按需定义 */
      flex: 1;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }

    #toolbar-container {
      border-bottom: 1px solid #ccc;
      height: auto;
    }

    #editor-container {
      flex: 1;
      overflow: auto;
    }
  </style>
</head>

<body>
  <header class="header">
    <h1 class="title">开始你的创作</h1>
    <input class="tie" type="text" placeholder="标题">
  </header>
  <div id="editor—wrapper">
    <div id="toolbar-container"></div>
    <div id="editor-container"></div>
  </div>
  <button class="submit">提交</button>
</body>

<script src="/client/writeBlog/wangdeitor.js"></script>
<script type="module">
  import axios from "/client/axios.js"
  // 获取本地
  const id = JSON.parse(localStorage.getItem("user"))._id

  // 所有插入图片
  const imgList1 = []

  const { createEditor, createToolbar } = window.wangEditor

  const editorConfig = {
    placeholder: '开始您的创作',
    MENU_CONF: {}
  }

  editorConfig.MENU_CONF['uploadImage'] = {
    server: '/blog/upload',

    fieldName: 'img',

    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 100 * 1024 * 1024,

    // 最多可上传几个文件，默认为 100
    maxNumberOfFiles: 10,

    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['image/*'],

    // 自定义增加 http  header
    headers: {
      Accept: 'text/x-json'
    },

    // 超时时间，默认为 10 秒
    timeout: 5 * 1000, // 5 秒

    onFailed(file, res) {
      console.log(`${file.name} 上传失败`, res)
    },

    // 上传错误，或者触发 timeout 超时
    onError(file, err, res) {
      console.log(`${file.name} 上传出错`, err, res)
    }
  }

  // 插入图片
  editorConfig.MENU_CONF['insertImage'] = {
    onInsertedImage(imageNode) {
      if (imageNode == null) return
      console.log(imageNode);
      const { src, alt, url, href } = imageNode
      imgList1.push(src)
    }
  }

  const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default'
  })

  document.querySelector(".submit").onclick = async function () {
    const blogStr = editor.getHtml()
    // 提交时存在的图片
    const imgList2 = editor.getElemsByType('image').map(res => res.src)

    // 去除在编译过程中删除的图片
    const del = imgList1.filter(res => {
      if (!imgList2.find(ele => ele === res)) {
        return true
      }
    })

    console.log(id);

    const r = await axios.post("/blog/delete", { del })
    console.log(id);
    axios.post("/blog/add", { id, blogStr })
  }

</script>

</html>